//页面加载完在执行
window.addEventListener('load',function() {
	var preview_img=document.querySelector('.preview_img');
	var mask=document.querySelector('.mask');
	var big=document.querySelector('.big');
	//1.鼠标经过preview_img，mask和big显示，离开隐藏
	preview_img.addEventListener('mouseover',function() {
		mask.style.display='block';
		big.style.display='block';
		mask.style.cursor="move";
	});
	preview_img.addEventListener('mouseout',function() {
		mask.style.display='none';
		big.style.display='none';
	});
	//2、遮罩层跟随鼠标移动
	preview_img.addEventListener('mousemove',function(e) {
		//计算出鼠标在盒子内的坐标(鼠标的位置坐标减去盒子距离浏览器的坐标 就是盒子内的坐标)
		var x=e.pageX-this.offsetLeft;
		var y=e.pageY-this.offsetTop;
		//mask的移动距离  为了鼠标能在遮罩层中间，用盒子的高度300除以2 是150（mask.offsetWidth/2）
		var maskX=x-mask.offsetWidth/2;
		var maskY=y-mask.offsetHeight/2;
		//限制遮罩层的移动范围
		//遮挡层最大移动距离
		var maskMax=preview_img.offsetWidth-mask.offsetWidth;
		if(maskX<0) {
			maskX=0;
		}else if(maskX>maskMax) {
			maskX=maskMax;
		}
		if(maskY<0) {
			maskY=0;
		}else if(maskY>maskMax) {
			maskY=maskMax;
		}
		mask.style.left=maskX+"px";
		mask.style.top=maskY+"px";
		var bigImg=document.querySelector('.bigImg');
		//大图片最大移动距离
		var bigMax=bigImg.offsetWidth-big.offsetWidth;
		//大图片的移动距离 X Y (大图片移动距离=遮挡层移动距离*大图片最大移动距离/遮挡层的最大移动距离)
		var bigX=maskX*bigMax/maskMax;
		var bigY=maskY*bigMax/maskMax;
		//大图与小图移动的方向相反
		bigImg.style.left=bigX+"px";
		bigImg.style.top=bigY+"px";
	})
})